export default `<template>
<div class="map-box">
  <div class="map" id="map"></div>
  <div class="btns-box">
    <el-button type="primary" size="small" @click="clearSource">清除数据源</el-button>
    <el-button type="primary" size="small" @click="removeLayer">删除图层</el-button>
  </div>
</div>
</template>

<script>
import "ol/ol.css";
import Draw from "ol/interaction/Draw";
import Map from "ol/Map";
import View from "ol/View";
import TileArcGISRest from "ol/source/TileArcGISRest";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { Icon, Style } from "ol/style";
import VectorSource from "ol/source/Vector";
import Point from "ol/geom/Point";
import Feature from "ol/Feature";

import pointImg from "@/images/device.png";
import CONSTANT from "@/config/constant.js";
import mapData from "./data.js";

export default {
name: "clearLayer",

data() {
  return {
    map: null,
    vectorLayer: null
  };
},

methods: {
  init() {
    this.map = new Map({
      layers: [
        new TileLayer({
          source: new TileArcGISRest({
            url: CONSTANT.GIS_URL
          })
        })
      ],
      target: "map",
      view: new View({
        center: [113.0567, 23.67537],
        maxZoom: 18,
        minZoom: 8,
        zoom: 13,
        projection: "EPSG:4326"
      })
    });

    this.showPoints();
  },

  //清除数据源
  clearSource() {
    if (this.vectorLayer) {
      this.vectorLayer.getSource().clear();
    }
  },

  //删除图层
  removeLayer() {
    if (this.vectorLayer) {
      this.map.removeLayer(this.vectorLayer);
    }
  },

  //展示点位
  showPoints() {
    this.vectorLayer = new VectorLayer({
      source: new VectorSource(),
      style: feature => {
        return [
          new Style({
            image: new Icon({
              src: pointImg
            })
          })
        ];
      }
    });

    let features = [];
    mapData.forEach(item => {
      if (item.gps_x != "" && item.gps_y != "") {
        let newObj = Object.assign({}, item);
        newObj.geometry = new Point([Number(item.gps_x), Number(item.gps_y)]);
        features.push(new Feature(newObj));
      }
    });

    this.vectorLayer.getSource().addFeatures(features);
    this.map.addLayer(this.vectorLayer);

    /* 
      mapData是数组，每一项结构：
      {
          "domain_id": 10000029,
          "domain_name": "深圳市第一看守所",
          "domain_type_name": "看守所",
          "gps_x": "113.0131",
          "gps_y": "23.71433",
          "count": 0,
          "channel_id": "",
          "group_idx": 1
      } */
  }
},

mounted() {
  this.init();
}
};
</script>

<style lang="less" scoped>
.map-box {
height: 100%;
position: relative;
.map {
  height: 100%;
}
.btns-box {
  position: absolute;
  right: 20px;
  top: 20px;
}
}
</style>
`